<template>
  <div>
    <div class="left noScroll">
      <div class="left-top"
           :class="{'left-jiankong':currentTabIndex===1}">
        <ul class="left-top-tab">
          <li :class="currentTabIndex===index?'current':''"
              v-for="(item,index) in tabArr"
              :key="index"
              @click.stop="currentTabIndex=index">{{item.name}}</li>
        </ul>
        <div class="left-top-list"
             v-if="currentTabIndex===0">
          <div class="left-top-item"
               :class="currentGenListIndex===index?'current':''"
               v-for="(item,index) in genArr"
               :key="index"
               @click.stop="onClickGenItem(index, item.name)">
            <div class="left-top-name">{{item.name}}</div>
            <div class="left-top-icon">
              <img src="../../../../assets/main/h_item_default@2x.png"
                   :class="{'img-light':currentGenListIndex==index}">
              <Icon :custom="'i-icon '+item.icon"
                    size="28" />
            </div>
            <div class="flex-1">
              <p>
                <span class="fs-26"
                      v-if="item.name == '作业车辆' || item.name == '作业人员'">{{item.currentNum}} </span>
                <span class="fs-26"> <span v-if="item.name == '作业车辆' || item.name == '作业人员'">/</span>
                  {{item.totalNum || 0 }}</span>
              </p>
            </div>
            <img src="../../../../assets/new/new_line.png"
                 class="left-top-line"
                 v-if="index!=4">
          </div>
        </div>
        <div v-show="genDetailVisible"
             class="left-top-modal"
             :style="{...genDetailPositionArr[currentGenListIndex]}"
             v-click-outside="handlerCloseGenDetail">
          <div class="left-top-modal-top">
            <div class="left-top-modal-top-name">
              {{currentGenListIndex===-1?'':genArr[currentGenListIndex].name}}
            </div>
            <Icon custom="i-icon ivu-icon-ios-close"
                  size="40"
                  class="cursor-pointer"
                  @click="genDetailVisible = false" />
          </div>
          <div class="left-top-detail">
            <!-- 车辆 -->
            <div class="left-top-car"
                 v-if="currentGenListIndex===0">
              <header>
                <span class="fs-16">总在线:</span>
                <span class="fs-20 m-l-12 text-white">{{genArr[currentGenListIndex].currentNum}} /
                  {{genArr[currentGenListIndex].totalNum}}</span>
              </header>
              <section>
                <div class="left-top-car-item"
                     v-for="(item,index) in carArr"
                     :key="index"
                     @click.stop="onClickGenDetailItem('车辆',item.carType)">
                  <img :src="car[item.carIcon]"
                       class="left-top-car-item-img">
                  <span class="fs-16 left-top-car-item-txt">{{item.carType}}</span>
                  <span class="fs-16 m-l-8">{{item.carOnlineNum}}</span>
                  <span class="fs-16">/{{item.carNum}}</span>
                </div>
              </section>
            </div>
            <!-- 人员 -->
            <div class="left-top-person"
                 v-if="currentGenListIndex===1">
              <header>
                <span class="fs-16">总在线：</span>
                <span class="fs-20 text-white">{{genArr[currentGenListIndex].currentNum}} /
                  {{genArr[currentGenListIndex].totalNum}}</span>
              </header>
              <section>
                <div class="left-top-person-item"
                     v-for="(item,index) in personArr"
                     :key="index"
                     @click.stop="onClickGenDetailItem('人员',item.empType)">
                  <img :src="work[item.empIcon]"
                       class="left-top-person-item-img">
                  <div style="margin: 10px 0;">{{item.empType}}</div>
                  <p>
                    <span class="fs-18">{{item.empOnlineNum || 0}}</span>
                    <span class="fs-18">/{{item.empNum}}</span>
                  </p>
                </div>
              </section>
            </div>
            <!-- 设施 -->
            <div class="left-top-fclt"
                 v-if="currentGenListIndex===2">
              <section>
                <template v-for="(item,index) in fcltArr">
                  <div class="left-top-fclt-item"
                       :key="index"
                       @click.stop="onClickGenDetailItem(item.facilitiesType)"
                       v-if="item.facilitiesType != '垃圾桶'">
                    <img :src="huanwei[item.facilitiesIcon]"
                         class="left-top-fclt-item-img">
                    {{item.facilitiesType}}
                    <p>
                      <span class="fs-18">{{item.num}}</span>
                    </p>
                  </div>
                </template>
              </section>
            </div>
            <!-- 园林绿地 -->
            <div class="left-top-green"
                 v-if="currentGenListIndex===3">
              <section :class="{'left-top-section1':greenArr.length<7,'left-top-section2':greenArr.length>6}">
                <div class="left-top-green-item"
                     v-for="(item,index) in greenArr"
                     :key="index"
                     @click.stop="onClickGenDetailItem('园林绿化',item.gardensName)">
                  <img :src="green[item.gardensIcon]"
                       class="left-top-green-item-img">
                  <div class="left-center-txt">{{item.gardensName}}</div>
                  <p>
                    <span class="fs-22">{{item.num}}</span>
                  </p>
                </div>
              </section>
            </div>
            <!-- 名木古树 -->
            <div class="left-top-green"
                 v-if="currentGenListIndex===4">
              <section>
                <div class="left-top-green-item"
                     v-for="(item,index) in treeArr"
                     :key="index"
                     @click.stop="onClickGenDetailItem('名木古树',item.oldTreesName)">
                  <img :src="tree[item.oldTreesIcon]"
                       class="left-top-green-item-img">
                  <div class="left-center-txt">{{item.oldTreesName}}</div>
                  <p>
                    <span class="fs-22">{{item.num}}</span>
                  </p>
                </div>
              </section>
            </div>
          </div>
          <div class="left-top-footer"></div>
        </div>
        <!-- 视频监控 -->
        <div class="left-video-content"
             v-if="currentTabIndex===1">
          <div class="left-video-content-item left-video-content-video"
               @click.stop="onClickVideoItem"
               v-for="(item,keys) in playVideoArr"
               :key="item.equipcode+'-'+item.channelid">
            <SocketVideoPlayer :dataId="item.equipcode"
                               :channelId="item.channelid"
                               style="width:100%;height:100%"
                               v-if="item.eqptype==='车载监控'"></SocketVideoPlayer>
            <HttpVideoPlayer :dataId="item.equipcode"
                             :channelId="item.channelid"
                             style="width:100%;height:100%"
                             v-if="item.eqptype==='视频设备'"></HttpVideoPlayer>
          </div>
          <div class="left-video-content-item"
               @click.stop="onClickVideoItem"
               v-for="(index,keys) in playVideoEmptyCount"
               :key="index">
            <Icon custom="i-icon icon-default_video1"
                  size="44"
                  class="left-video-content-item-icon" />
          </div>
          <img src="../../../../assets/new/new_line.png"
               class="left-video-content-line">
          <img src="../../../../assets/new/new_line.png"
               class="left-video-content-line"
               style="top: 470px;">
        </div>

        <!-- 左 视频监控点击 -->
        <Modal v-model="videoVisible"
               width="1106"
               :closable="false"
               footer-hide
               class="video-box">
          <div class="video">
            <div class="video-title">
              <div class="video-title-item"
                   @click.stop="currentVideoTabIndex=0"
                   :class="{current : currentVideoTabIndex == 0}">
                电子监控 ({{videoList1.length}})</div>
              <div class="video-title-item"
                   @click.stop="currentVideoTabIndex=1"
                   :class="{current : currentVideoTabIndex == 1}">
                车载视频 ({{videoList2.length}})</div>
              <div class="video-title-item"
                   @click.stop="currentVideoTabIndex=2"
                   :class="{current : currentVideoTabIndex == 2}">
                回传视频 ({{videoList3.length}})</div>
              <div class="video-title-close">
                <img src="../../../../assets/new/new_close.png"
                     @click.stop="videoVisible = !videoVisible">
              </div>
            </div>
            <div class="video-screen">
              <div class="video-screen-item">
                <MyTreeSelect :value="departmentName"
                              placeholder="所属机构"
                              clearable
                              :data="departmentTreeData"
                              search
                              style="width: 158px;"
                              @onSelectChange="onChangeDepartment">
                </MyTreeSelect>
              </div>
              <!-- 电子监控 -->
              <template v-if="currentVideoTabIndex === 0">
                <div class="video-screen-item">
                  <Select v-model="facilityType"
                          clearable
                          style="width:160px"
                          placeholder="设施类型"
                          @on-change="onChangeFacilityType">
                    <Option v-for="item in facilityTypeArr"
                            :value="item.id"
                            :key="item.id">
                      {{ item.name }}
                    </Option>
                  </Select>
                </div>
                <div class="video-screen-item">
                  <Input v-model="cameraNumber"
                         maxlength="30"
                         v-stringLimit
                         clearable
                         icon="md-search"
                         placeholder="请输入摄像头编号"
                         style="width: 200px"
                         @on-change="onChangeCameraNumber" />
                </div>
              </template>
              <!-- 车载视频 -->
              <template v-if="currentVideoTabIndex === 1">
                <div class="video-screen-item">
                  <Select v-model="carType"
                          clearable
                          style="width:160px"
                          placeholder="车辆类型"
                          @on-change="onChangeCarType">
                    <Option v-for="item in carTypeArr"
                            :value="item.id"
                            :key="item.id">
                      {{ item.name }}
                    </Option>
                  </Select>
                </div>
                <div class="video-screen-item">
                  <Input v-model="carNumber"
                         maxlength="30"
                         v-stringLimit
                         clearable
                         icon="md-search"
                         placeholder="请输入车牌号"
                         style="width: 200px"
                         @on-change="onChangeCarNumber" />
                </div>
              </template>
              <!-- 回传视频 -->
              <template v-if="currentVideoTabIndex === 2">
                <div class="video-screen-item">
                  <MyTreeSelect :value="person"
                                placeholder="选择人员"
                                clearable
                                :data="personTreeData"
                                search
                                @onSelectChange="onChangePerson">
                  </MyTreeSelect>
                </div>
              </template>
            </div>
            <div class="video-line">
              <img src="../../../../assets/new/new_video_line.png">
            </div>
            <div class="video-list noScroll">
              <Collapse simple>
                <Panel class="video-list-item"
                       v-for="(item,index) in (currentVideoTabIndex===0?videoList1:currentVideoTabIndex===1?videoList2:videoList3)"
                       :key="index">
                  <!-- <img src="../../../../assets/new/video_light.png" class="video-list-item-top"></img>
									<img src="../../../../assets/new/video_light.png" class="video-list-item-bottom"></img> -->
                  <div class="item-parent flex-1">
                    <div class="text"
                         style="flex: 1;">
                      <div class="flex">
                        <div @click.stop>
                          <Checkbox :value="videoAllCheck(item)"
                                    :indeterminate="videoIndeterminate(item)"
                                    :disabled="item.onlinestatus == 1"
                                    @on-change="(e)=>{onChangeVideoCheck(e,item)}"></Checkbox>
                        </div>
                        <span class="name">{{item.bindname}}</span>
                      </div>
                    </div>
                    <div style="flex: 1;">{{item.equipcode}}</div>
                    <div class="num">
                      <span>{{item.details.length}}</span>
                    </div>
                  </div>
                  <div class="item-child"
                       slot="content">
                    <div v-for="(items,indexs) in item.details"
                         :key="indexs"
                         class="item-child-cont"
                         :class="{unline : item.onlinestatus == 1}">
                      <div>
                        <Checkbox v-model="items.checked"
                                  :disabled="item.onlinestatus == 1"
                                  @on-change="(e)=>{onChangeVideoItemCheck(e,items)}">
                          {{items.channelname}}({{items.channelid}})
                        </Checkbox>
                      </div>
                      <div class="item-child-cont-status"
                           :class="{'on-line' : item.onlinestatus == 0}">
                        {{item.onlinestatus == 0 ? "在线" : "离线"}}
                      </div>
                    </div>
                  </div>
                </Panel>
              </Collapse>
            </div>
            <div class="video-line">
              <img src="../../../../assets/new/new_video_line.png">
            </div>
            <div class="video-btn">
              <div class="video-btn-left"
                   @click.stop="videoVisible = !videoVisible">
                取消
              </div>
              <div class="video-btn-right"
                   @click.stop="videoVisible = !videoVisible">
                确定
              </div>
            </div>
          </div>
        </Modal>
      </div>
      <div class="left-emer"
           @click.stop="onClickEmer"
           v-if="EmergentPlan>0">
        <div class="left-emer-title">
          <div>{{EmergentPlan}}</div>
          <div>个应急计划进行中...</div>
        </div>
        <img src="../../../../assets/main/h_emergency_icon.png">
      </div>
    </div>
    <div class="right noScroll">
      <NewSection imgType="newCar"
                  title="人员/车辆状况"
                  :type="0"
                  :class="{'right-top-opction':search}">
        <div class="right-car">
          <div class="right-car-item">
            <i-circle :percent="personStateRate"
                      :size="54"
                      :trail-width="9"
                      trail-color="#272c2f"
                      :stroke-width="9"
                      stroke-color="#00BAFF">
              <Icon custom="i-icon icon-renqun"
                    size="28"
                    color="#fff"
                    class="right-title-icon" />
            </i-circle>
            <div class="flex-1 m-l-25">
              <p class="fs-13">人员在岗率</p>
              <div class="flex fs-18">
                <p class="flex-1">
                  <span class="">{{personStateRate}}</span>%
                </p>
                <p class="flex-1">
                  <span class="">{{personStateOnline}}</span>/<span class="">{{personStateTotal}}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="right-car-item">
            <i-circle :percent="carStateRate"
                      :size="54"
                      :trail-width="9"
                      trail-color="#272c2f"
                      :stroke-width="9"
                      stroke-color="#00BAFF">
              <Icon custom="i-icon icon-cheliangshiti"
                    size="28"
                    color="#fff"
                    class="right-title-icon" />
            </i-circle>
            <div class="flex-1 m-l-25">
              <p class="fs-13">车辆在岗率</p>
              <div class="flex fs-18">
                <p class="flex-1">
                  <span class="">{{carStateRate}}</span>%
                </p>
                <p class="flex-1">
                  <span class="">{{carStateOnline}}</span>/<span class="">{{carStateTotal}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </NewSection>
      <NewSection imgType="newWork"
                  title="作业监管"
                  :type="0">
        <div class="right-work">
          <div class="right-work-item">
            <div class="fs-14 flex j-between">
              机械作业
              <span>{{mechanicalRate}}%</span>
            </div>
            <Progress :percent="mechanicalRate"
                      hide-info
                      :stroke-color="['#2292BD','#02B8FC']" />
          </div>
          <div class="right-work-item">
            <div class="fs-14 flex j-between">
              垃圾清运
              <span>{{garbageRate}}%</span>
            </div>
            <Progress :percent="garbageRate"
                      hide-info
                      :stroke-color="['#2292BD','#02B8FC']" />
          </div>
        </div>
      </NewSection>
      <NewSection imgType="newAbnormal"
                  title="当日异常"
                  :type="6"
                  rightIcon
                  @onClickRightIcon="onClickException">
        <div class="right-exception">
          <div class="right-exception-item"
               style="margin-right: 30px;">
            <div class="right-exception-item-top">
              <Icon custom="i-icon icon-cheliangyichang"
                    size="38"
                    color="#fff" />
              <div class="m-l-10">
                <p>异常车辆</p> <span class="">{{dryc_yccl}}</span>
              </div>
            </div>
            <!-- <div class="right-exception-item-number">
							<div class="right-exception-item-num">
								<span>超速</span>
								<span class="right-exception-item-det">0</span>
							</div>
							<div class="right-exception-item-num">
								<span>漏油</span>
								<span class="right-exception-item-det">0</span>
							</div>
						</div> -->
            <!-- 2021年8月15日暂时隐藏 -->
            <div class="right-exception-item-bottom"
                 v-if="false">
              <div>
                空驶<span class="">{{dryc_ks}}</span>
                停留<span class="">{{dryc_tl}}</span>
              </div>
              <!-- <template v-if="carGroup.length > 0">
                <template v-for="(item, index) in carGroup">
                  <div v-if="index < 2"
                       :key="index">{{ item.expName }}<span class="">{{ item.count }}</span>
                  </div>
                </template>
              </template> -->
            </div>
          </div>
          <div class="right-exception-item">
            <div class="right-exception-item-top">
              <Icon custom="i-icon icon-renyuanyichang"
                    size="38"
                    color="#fff" />
              <div class="m-l-10">
                <p>异常人员</p> <span class="">{{dryc_ycry}}</span>
              </div>
            </div>
            <!-- <div class="right-exception-item-number">
							<div class="right-exception-item-num">
								<span>离线</span>
								<span class="right-exception-item-det">0</span>
							</div>
							<div class="right-exception-item-num">
								<span>离岗</span>
								<span class="right-exception-item-det">0</span>
							</div>
						</div> -->
            <!-- 2021年8月15日暂时隐藏 -->
            <div class="right-exception-item-bottom"
                 v-if="false">
              <div>
                离线<span class="">{{dryc_lx}}</span>
                离岗<span class="">{{dryc_lg}}</span>
              </div>
              <!-- <template v-if="personGroup.length > 0">
                <template v-for="(item, index) in personGroup">
                  <div v-if="index < 2"
                       :key="index">{{ item.expName }}<span class="">{{ item.count }}</span>
                  </div>
                </template>
              </template> -->
            </div>
          </div>
        </div>
      </NewSection>
      <!-- <MainSection icon="icon-baojing3"
                   title="事件概况"
                   v-if="false"
                   rightIcon
                   @onClickRightIcon="onClickCase">
        <div class="right-event">
          <div class="right-event-top">
            <div>今日新增<span class="fs-30 m-l-10">0</span></div>
            <div>
              环比昨日
              <span class="m-l-10"
                    style="color: rgb(233, 111, 25);">
                -100%
                <Icon custom="i-icon icon-xiajiang1"
                      size="16" />
              </span>
            </div>
          </div>
          <div class="right-event-bottom">
            <div class="flex a-center">
              <i-circle :percent="20"
                        :size="70"
                        :trail-width="10"
                        trail-color="#272c2f"
                        :stroke-width="10"
                        :stroke-color="['#00b7ee','#556fb5']">
                <span class="fs-20">20%</span>
              </i-circle>
              <div class="flex-1 m-l-10">
                <p class="fs-16">结案</p>
                <p class="flex fs-30">0</p>
              </div>
            </div>
            <div class="w-200">
              <p class="m-b-20">
                近30天结案率
                <span class="fs-24 fw-700 m-l-15">33%</span>
              </p>
              <Echarts height="30px"
                       :options="eventOptions"></Echarts>
            </div>
          </div>
        </div>
      </MainSection> -->
    </div>

    <!-- 右 当日异常 图标点击 -->
    <Modal v-model="exceptionVisible"
           width="718"
           :closable="false"
           footer-hide
           :styles="{right: '200px',top:'106px'}"
           class="exception-modal">
      <div class="exception">
        <div class="exception-top">
          <div class="exception-top-name">
            异常列表
          </div>
          <img src="../../../../assets/new/new_close.png"
               class="exception-top-img"
               @click.stop="onClickExceptionClose">
        </div>
        <div class="exception-title">
          <div class="exception-title-left">
            <div class="exception-title-left-tab">
              <div @click.stop="onClickExceptionTabItem(0)"
                   :class="{'exception-title-left-tab-in' : currentExceptionTabIndex == 0}">
                车辆
              </div>
              <div @click.stop="onClickExceptionTabItem(1)"
                   :class="{'exception-title-left-tab-in' : currentExceptionTabIndex == 1}">
                人员
              </div>
            </div>

            <div :class="tbsr_cp > 0 ? 'exception-title-left-once' : 'exception-title-left-more'">
              <div>异常{{ currentExceptionTabIndex == 0 ? '车辆' : '人员' }}数</div>
              <div><span>{{exp_cp}}</span>{{currentExceptionTabIndex == 0 ? '辆' : '人'}}</div>
              <div>同比上日<span>{{tbsr_cp}}</span></div>
            </div>

            <div :class="tbsr_count > 0 ? 'exception-title-left-once' : 'exception-title-left-more'">
              <div>异常总次数</div>
              <div><span>{{exp_count}}</span>次</div>
              <div>同比上日<span>{{tbsr_count}}</span></div>
            </div>
          </div>
          <div class="exception-title-right">
            <template v-for="(item, index) in expGroupList">
              <div class="exception-title-right-row"
                   v-if="index < 2"
                   :key="index">
                <div>{{item.expName}}</div>
                <Progress :percent="item.percent > 100 ? 100 : item.percent"
                          hide-info
                          :stroke-width="8"
                          :stroke-color="index == 0 ? '#C43A3A' : '#00BAFF'" />
                <div>{{ item.count }}</div>
              </div>
            </template>
          </div>
        </div>
        <div class="exception-type">
          <div class="exception-type-item">
            <span class="exception-type-item-title fs-16">{{ currentExceptionTabIndex === 0 ? "车辆" : "人员" }}类型：</span>
            <Select v-model="personOrCarType"
                    clearable
                    style="width: 180px"
                    @on-change="getExceptionList">
              <Option :value="item.name"
                      v-for="item in personOrCarTypeArr"
                      :key='item.id'>{{item.name}}
              </Option>
            </Select>
          </div>
          <div class="exception-type-item">
            <span class="exception-type-item-title fs-16">异常类型：</span>
            <Select v-model="exceptionType"
                    clearable
                    style="width: 180px;"
                    @on-change="getExceptionList">
              <Option :value="item.name"
                      v-for="item in exceptionTypeArr"
                      :key='item.id'>{{item.name}}
              </Option>
            </Select>
          </div>
          <div class="exception-type-item"
               style="margin-right: 0;">
            <span class="exception-type-item-title fs-16">日期：</span>
            <DatePicker type="date"
                        :value="date"
                        format="yyyy-MM-dd"
                        placeholder=""
                        :editable="false"
                        @on-change="onChangeDate"
                        style="width: 180px;"></DatePicker>
          </div>
        </div>
        <div class="exception-line">
          <img src="../../../../assets/new/new_img_light_line.png">
        </div>
        <div class="exception-cont noScroll">
          <div class="exception-cont-item"
               v-for="(item,index) in exceptionList"
               :key="index">
            <div class="cont-title">
              <div class="cont-title-msg">
                <div>{{item.depName}}：</div>
                <div>{{item.name}}[{{item.type}}]</div>
              </div>
              <div class="cont-title-msg cont-title-center">
                <div>{{ item.expName }}：</div>
                <div>{{ item.items ? item.items.length : 0 }}次</div>
              </div>
              <div class="cont-title-msg cont-title-center">
                <div>累积时长：</div>
                <div>{{item.duration}}</div>
              </div>
              <div class="cont-title-btn"
                   @click.stop="onClickExceptionDetail(item)">
                <div>
                  {{item.visible ? '收起' : '详情'}}
                </div>
                <Icon custom="i-icon icon-sort-2"
                      size="16"
                      class="cont-title-btn-icon"
                      :class="{'cont-title-btn-icon-show' : item.visible}" />
              </div>
            </div>
            <div class="cont-bottom"
                 v-show="item.visible">
              <div class="cont-bottom-item"
                   v-for="(items,indexs) in item.items"
                   :key="indexs">
                <div>{{indexs + 1}}</div>
                <div>{{items.createTime}}</div>
                <div>{{items.content}}</div>
                <div class="flex a-center j-end cursor-pointer"
                     @click.stop="onClickExceptionItems(item,items)"
                     :style="{color: items.dealType ? '#00BAFF' : ''}">
                  {{items.dealType ? items.dealType : '待处理'}}
                  <Icon custom="i-icon icon-youjiantou"
                        size="16"
                        class="cursor-pointer"
                        style="color: rgba(255,255,255,.65);" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Modal>

    <!-- 右 事件概况 图标点击 -->
    <!-- <div class="case noScroll" v-show="caseVisible">
			<div class="case-title">
				<div class="case-title-left">
					<Icon custom="i-icon icon-guanbi" size="24" color="#7d7d7d" class="case-title-left-icon"
						@click.stop="onClickCloseCase" />
					<div class="case-title-left-tabs">
						<div @click.stop="onClickCaseTitle(0)"
							:class="{'case-title-left-tabs-in' : caseTitleIndex == 0}">巡查</div>
						<div @click.stop="onClickCaseTitle(1)"
							:class="{'case-title-left-tabs-in' : caseTitleIndex == 1}">意见</div>
						<div @click.stop="onClickCaseTitle(2)"
							:class="{'case-title-left-tabs-in' : caseTitleIndex == 2}">督办</div>
					</div>
				</div>
				<div class="case-title-right">
					<Icon custom="i-icon icon-chaxunsousuo" size="24" class="right-icon"
						@click.stop="onClickCaseSearch" />
					<Icon custom="i-icon icon-shaixuan1" size="19" class="right-icon"
						:class="{'right-two-icon-in':caseFiltrateVisible}" @click.stop="onClickCaseFiltrate"
						v-show="caseFiltrateIconVisible" />
				</div>
				<div v-show="caseSearchVisible" class="case-title-search">
					<Icon custom="i-icon icon-guanbi" size="36" color="#FFF" @click.stop="onClickCloseCaseSearch"
						class="case-title-search-icon" />
					<Input v-model="caseSearchValue" placeholder="请输入工单号" />
				</div>
			</div>
			<div class="case-filtrate" v-show="caseFiltrateVisible">
				<Cascader :data="caseTypeList" v-model="caseType" style="width:60%" placeholder="事件类型"></Cascader>
				<Select v-model="caseStatus" style="width:20%" placeholder="状态">
					<Option v-for="item in caseStatusList" :value="item.value" :key="item.value" placeholder="状态">
						{{ item.label }}
					</Option>
				</Select>
				<Select v-model="caseGrade" style="width:20%" placeholder="等级">
					<Option v-for="item in caseGradeList" :value="item.value" :key="item.value">{{ item.label }}
					</Option>
				</Select>
			</div>
			<div class="case-cont noScroll">
				<div v-if="caseList && caseList.length == 0">
					<div class="noData">
						<img src="../../../../assets/main/blank_black.png">
						<p>暂无数据</p>
					</div>
				</div>
				<div class="case-cont-item" v-for="(item,index) in caseList" :key="index"
					@click.stop="onClickCaseDetail(item)">
					<div class="cont-row1">
						<div class="cont-row1-left">
							<div v-if="item.grade == 0" class="general">[一般]</div>
							<div v-if="item.grade == 1">[严重]</div>
							<div v-if="item.grade == 2">[紧急]</div>
							<div v-if="item.grade == 3" class="extra">[特急]</div>
							<div>{{item.name}}</div>
						</div>
						<div class="cont-row1-right">
							<div class="cont-row1-right-status" v-if="item.status == 0">待分派</div>
							<div class="cont-row1-right-status" v-if="item.status == 1">待处理</div>
							<div class="cont-row1-right-status" v-if="item.status == 2">待结案</div>
							<div @click.stop>
								<Dropdown placement="bottom-end" @on-click="onClickDropdowm">
									<Icon custom="i-icon icon-gengduo2" size="16" class="cont-row1-right-icon" />
									<DropdownMenu slot="list">
										<DropdownItem name="assign">分派</DropdownItem>
										<DropdownItem name="settle">结案</DropdownItem>
										<DropdownItem name="neglect">忽略</DropdownItem>
										<DropdownItem name="discard">废弃</DropdownItem>
										<DropdownItem name="urge">催办</DropdownItem>
									</DropdownMenu>
								</Dropdown>
							</div>

						</div>
					</div>
					<div class="cont-row2" @click.stop>
						NO.{{item.number}}
						<Tooltip content="复制">
							<Icon custom="i-icon ivu-icon-md-albums" size="14" class="cont-row2-icon" />
						</Tooltip>
					</div>
					<div class="cont-row3">
						<Icon custom="i-icon icon-xiaoxileixing" size="16" class="cont-row3-icon" />
						<span>{{item.people}} {{item.name}} | {{item.time}}</span>
					</div>
					<div class="cont-row4">
						<Icon custom="i-icon icon-dizhi1" size="16" class="cont-row4-lefticon" />
						<span class="cont-row4-span">{{item.site}}</span>
						<Icon custom="i-icon icon-zhuizongdingwei" size="16" class="cont-row4-righticon" />
					</div>
				</div>
			</div>
		</div> -->

    <!-- 右 事件概况/巡查案件 详情页 -->
    <div class="case-detail"
         v-show="caseVisible">
      <div class="case-detail-title">
        <div class="case-detail-title-left">
          <Icon custom="i-icon icon-zuojiantou"
                size="20"
                color="#FFFFFF"
                class="case-detail-title-left-icon"
                @click.stop="onClickCloseCaseDetail" />
          <div class="case-detail-title-left-right">
            <div class="case-detail-title-left-right-row1">
              <span class="general">[{{caseDetail.levelName}}]</span>
              <span>{{caseDetail.questBigTypeName}}</span>
            </div>
          </div>
        </div>
        <div class="case-detail-title-right"
             :class="{over:caseDetail.status == 4}">
          <span v-if="caseDetail.status == 1">待分派</span>
          <span v-if="caseDetail.status == 2">待处理</span>
          <span v-if="caseDetail.status == 3">待结案</span>
          <span v-if="caseDetail.status == 4">已结案</span>
        </div>
      </div>
      <div class="case-detail-id">{{caseDetail.workOrderNumber}}</div>
      <div class="case-detail-msg">
        <div>
          {{caseDetail.createName}} | {{caseDetail.questBigTypeName}} | {{caseDetail.createTime}} 上报
        </div>
        <div class="case-detail-msg-site">
          {{caseDetail.site}}
        </div>
        <div class="case-detail-msg-treating">
          处理过程
        </div>
        <Timeline>
          <TimelineItem v-for="(item, index) in caseDetail.caseProcesses"
                        :key="index">
            <div class="case-detail-timeline">
              <div class="case-detail-timeline-row1">
                <div class="row1-status">{{item.handle}}</div>
                <div class="row1-time">{{item.createTime}}</div>
              </div>
              <div class="case-detail-timeline-people">
                <p>操作人：{{item.createAccount}}</p>
                <p v-if="item.costtimedetail">耗时：{{item.costtimedetail}}</p>
              </div>
              <div v-if="item.remark"
                   class="case-detail-timeline-people">
                <p>备注：{{item.remark}}</p>
              </div>
            </div>
          </TimelineItem>
        </Timeline>
      </div>
      <div class="case-detail-footer">
        <!-- <div @click.stop="onClickCaseDispose()">处理</div> -->
        <template v-if="caseDetail.status == 1">
          <div @click.stop="onClickStatusCase('指派')">指派</div>
        </template>
        <template v-if="caseDetail.status == 2">
          <div @click.stop="onClickStatusCase('改派')">改派</div>
          <div class="light"
               @click.stop="onClickStatusCase('催办')">催办</div>
        </template>
        <template v-if="caseDetail.status == 3">
          <div @click.stop="onClickStatusCase('结案')">结案</div>
        </template>
      </div>
    </div>

    <!-- 右 事件概况 详情页 底部按钮点击 -->
    <Modal v-model="caseFooterModalVisible"
           :title="caseFooterModal">
      <div v-if="caseFooterModal == '催办'"
           class="case-modal">
        <div class="case-modal-title">
          <div class="modal-title">催办描述：</div>
          <Input v-model="caseUrge"
                 maxlength="-1"
                 type="textarea"
                 autosize />
        </div>
      </div>
      <div v-if="caseFooterModal == '结案'"
           class="case-modal">
        <div class="case-modal-title">
          <div class="modal-title">备注：</div>
          <Input v-model="caseFinish"
                 maxlength="-1"
                 type="textarea"
                 autosize />
        </div>
      </div>
      <div v-if="caseFooterModal == '忽略'"
           class="case-modal">
        <div class="case-modal-title">
          <div class="modal-title">忽略理由：</div>
          <RadioGroup v-model="neglectRemark">
            <Radio label="verify">
              <span>已核实</span>
            </Radio>
            <Radio label="dispose">
              <span>已处理</span>
            </Radio>
          </RadioGroup>
        </div>
        <div class="case-modal-title">
          <div class="modal-title">忽略备注：</div>
          <Input v-model="caseNeglect"
                 maxlength="-1"
                 type="textarea"
                 autosize />
        </div>
      </div>

      <div v-if="caseFooterModal == '分派'"
           class="case-modal">
        <div class="assign">
          <div class="assign-item">
            <span class="assign-item-title">指派：</span>
            <MyTreeSelect search
                          v-model="assignTree"
                          :data="personTreeData"
                          style="width: 163px;">
            </MyTreeSelect>
          </div>
          <div class="assign-item">
            <span class="assign-item-title">紧急程度：</span>
            <Select v-model="assignGrade"
                    style="width:163px">
              <Option value="yiban">一般</Option>
              <Option value="yanzhong">严重</Option>
              <Option value="jinji">紧急</Option>
              <Option value="teji">特急</Option>
            </Select>
          </div>
          <div class="assign-item">
            <span class="assign-item-title">限时：</span>
            <Input v-model="assignTime"
                   style="width: 160px;" />
            <span class="assign-item-time">分钟</span>
          </div>
          <div class="assign-item">
            <span class="assign-item-title">抄送：</span>
            <MyTreeSelect search
                          v-model="copyTree"
                          :data="personTreeData"
                          style="width: 163px;">
            </MyTreeSelect>
          </div>
          <div class="assign-item">
            <span class="assign-item-title"></span>
            <Checkbox v-model="assignNote">短信推送</Checkbox>
          </div>
        </div>
        <div class="case-modal-title">
          <div class="modal-title">分派备注：</div>
          <Input v-model="caseAssign"
                 maxlength="-1"
                 type="textarea"
                 autosize />
        </div>
      </div>

      <div v-if="caseFooterModal == '废弃'"
           class="case-modal">
        <div class="discard">
          <Icon custom="i-icon icon-baojingtixing"
                size="40"
                color="#f00"
                class="" />
          <div>
            <p>是否确认此操作</p>
            <p>废弃该事件后，将无法进行下一步操作?</p>
          </div>
        </div>
      </div>
    </Modal>

    <!-- 处理 -->
    <NewAlarmDealModal v-model="violationAlarmDealVisible"
                       :dataId.sync="violationAlarmDealId"
                       :type="violationAlarmDealType"
                       @onClickConfirm="getExceptionList"></NewAlarmDealModal>

    <!-- 指派 分派 -->
    <NewPatrolCaseAssignModal v-model="patrolCaseAssignVisible"
                              :type="patrolCaseAssignType"
                              :item.sync="patrolCaseAssignObj"
                              :lnglat.sync="patrolCaseAssignLnglat"
                              @onClickConfirm="caseVisible=false">
    </NewPatrolCaseAssignModal>

    <!-- 结案 -->
    <NewPatrolCaseCloseModal v-model="patrolCaseCloseVisible"
                             :dataId.sync="patrolCaseCloseId"
                             @onClickConfirm="caseVisible=false"></NewPatrolCaseCloseModal>

    <!-- 催办 -->
    <NewPatrolCaseUrgeModal v-model="patrolCaseUrgeVisible"
                            :dataId.sync="patrolCaseUrgeId"
                            @onClickConfirm="caseVisible=false"></NewPatrolCaseUrgeModal>
  </div>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex';
import bus from '@/utils/bus'
import {
  getToday
} from '@/utils/dateRangUtil'
import MainSection from '../template/MainSection';
import MyTreeSelect from '@/components/common/MyTreeSelect';
import Echarts from '../../../common/Echarts';
import SocketVideoPlayer from '@/components/common/SocketVideoPlayer';
import HttpVideoPlayer from '@/components/common/HttpVideoPlayer';
import NewAlarmDealModal from '@/components/product/main/new/NewAlarmDealModal'
import vClickOutside from 'v-click-outside'
import PatrolCaseAssignModal from '@/components/product/admin/modal/patrolMaintain/PatrolCaseAssignModal'
import PatrolCaseCloseModal from '@/components/product/admin/modal/patrolMaintain/PatrolCaseCloseModal'
import PatrolCaseUrgeModal from '@/components/product/admin/modal/patrolMaintain/PatrolCaseUrgeModal'
import NewPatrolCaseUrgeModal from '@/components/product/main/new/NewPatrolCaseUrgeModal'
import NewPatrolCaseAssignModal from '@/components/product/main/new/NewPatrolCaseAssignModal'
import NewPatrolCaseCloseModal from '@/components/product/main/new/NewPatrolCaseCloseModal'
import NewSection from '../subject/NewSection';
import { closeFlacDemandVideo } from '@/utils/videoFacl'
export default {
  components: {
    MainSection,
    MyTreeSelect,
    Echarts,
    SocketVideoPlayer,
    HttpVideoPlayer,
    NewAlarmDealModal,
    PatrolCaseAssignModal,
    PatrolCaseCloseModal,
    PatrolCaseUrgeModal,
    NewSection,
    NewPatrolCaseUrgeModal,
    NewPatrolCaseAssignModal,
    NewPatrolCaseCloseModal
  },
  directives: {
    clickOutside: vClickOutside.directive
  },
  props: {
    search: Boolean
  },
  data () {
    return {
      tabArr: [{
        name: '要素概况'
      },
      {
        name: '视频监控'
      }
      ],
      car: {
        'icon-sashuiche': require('../../../../assets/new/new_car_1.png'),
        'icon-beiche': require('../../../../assets/new/new_car_2.png'),
        'icon-zhuanyunche': require('../../../../assets/new/new_car_3.png'),
        'icon-beiche': require('../../../../assets/new/new_car_1.png'),
        'icon-xifenche': require('../../../../assets/new/new_car_5.png'),
        'icon-penwuche': require('../../../../assets/new/new_car_6.png'),
        'icon-xisaoche': require('../../../../assets/new/new_car_7.png'),
        'icon-zhuanyunche': require('../../../../assets/new/new_car_8.png')
      },
      huanwei: {
        'icon-biaoshi_gongce': require('../../../../assets/new/new_huanwei_1.png'),
        'icon-biaoshi_shoujidian': require('../../../../assets/new/new_huanwei_2.png'),
        'icon-biaoshi_zhongzhuanzhan': require('../../../../assets/new/new_huanwei_3.png'),
        'icon-biaoshi_yinjinggai': require('../../../../assets/new/new_jg.png'),
        'icon-biaoshi_chulizhan': require('../../../../assets/new/new_huanwei_4.png')
      },
      work: {
        'icon-biaoshi_renyuan': require('../../../../assets/new/new_work_1.png'),
        'icon-biaoshi_renyuan': require('../../../../assets/new/new_work_1.png'),
        'icon-biaoshi_renyuan': require('../../../../assets/new/new_work_1.png'),
        'icon-huanweigong': require('../../../../assets/new/new_work_2.png'),
        'icon-jiashiyuan1': require('../../../../assets/new/new_work_3.png')
      },
      green: {
        'icon-qitalvhua': require('../../../../assets/new/new_shu_1.png'),
        'landscaping': require('../../../../assets/new/new_shu_1.png'),
        'icon-zonghegongyuan': require('../../../../assets/new/new_shu_2.png'),
        'icon-shequgongyuan': require('../../../../assets/new/new_shu_3.png'),
        'icon-koudaigongyuan': require('../../../../assets/new/new_shu_4.png'),
        'icon-lvhuadai': require('../../../../assets/new/new_shu_5.png'),
        'mapholecover17': require('../../../../assets/new/new_shu_5.png')
      },
      tree: {
        'icon-yuanlinlvdi': require('../../../../assets/new/new_tree_1.png'),
        'famoustrees': require('../../../../assets/new/new_tree_1.png'),
        'icon-zhenximingmu': require('../../../../assets/new/new_tree_1.png'),
        'icon-jinianmingmu': require('../../../../assets/new/new_tree_1.png')
      },
      currentTabIndex: 0,
      // 要素概况
      // genArr: [
      //   {
      //     name: '作业车辆',
      //     icon: 'icon-zhuanyunche1',
      //     currentNum: 0,
      //     totalNum: 0
      //   },
      //   {
      //     name: '作业人员',
      //     icon: 'icon-huanweigong',
      //     currentNum: 0,
      //     totalNum: 0
      //   },
      //   {
      //     name: '环卫设施',
      //     icon: 'icon-sheshi_mian',
      //     currentNum: 0,
      //     totalNum: 0
      //   },
      //   {
      //     name: '园林绿地',
      //     icon: 'icon-yuanlinlvdi',
      //     currentNum: 0,
      //     totalNum: 0
      //   },
      //   {
      //     name: '名木古树',
      //     icon: 'icon-gushumingmu',
      //     currentNum: 0,
      //     totalNum: 0
      //   },
      // ],
      currentGenListIndex: -1,
      genDetailVisible: false,
      genDetailPositionArr: [{
        top: '80px',
        width: '372px'
      },
      {
        top: '162px',
        width: '372px'
      },
      {
        top: '244px',
        width: '372px'
      },
      {
        top: '326px',
        width: '372px'
      },
      {
        top: '408px',
        width: '372px'
      },
      ],
      // carArr: [],
      // personArr: [],
      // fcltArr: [],
      // greenArr: [],
      // treeArr: [],
      // 视频监控
      playVideoCount: 3,
      playVideoArr: [],
      videoVisible: false,
      departmentName: '',
      departmentId: '',
      facilityType: '',
      carType: '',
      person: '',
      personId: '',
      cameraNumber: '',
      carNumber: '',
      videoList1: [],
      videoList2: [],
      videoList3: [],
      currentVideoTabIndex: 0,
      // 人员/车辆状况
      personStateRate: 0,
      personStateOnline: 0,
      personStateTotal: 0,
      carStateRate: 0,
      carStateOnline: 0,
      carStateTotal: 0,
      // 作业监管
      mechanicalRate: 0,
      garbageRate: 0,
      // 当日异常
      dryc_yccl: 0,
      dryc_ks: 0,
      dryc_tl: 0,
      carGroup: [],
      personGroup: [],
      dryc_ycry: 0,
      dryc_lx: 0,
      dryc_lg: 0,
      exp_cp: 0,
      tbsr_cp: 0,
      exp_count: 0,
      tbsr_count: 0,
      expGroupList: [],
      exceptionVisible: false,
      date: '',
      personOrCarType: '',
      personOrCarTypeArr: [],
      exceptionType: '',
      exceptionTypeArr: [],
      carExceptionTypeArr: [],
      personExceptionTypeArr: [],
      exceptionList: [],
      currentExceptionTabIndex: 0,
      // 事件
      caseId: '',
      caseVisible: false,
      caseSearchVisible: false,
      caseSearchValue: '',
      caseType: [],
      caseTypeList: [{
        value: 'huanjingweisheng',
        label: '环境卫生',
        children: [{
          value: 'baolulaji',
          label: '暴露垃圾'
        },
        {
          value: 'jicunlaji',
          label: '积存垃圾'
        },
        {
          value: 'daolubujie',
          label: '道路不洁'
        }
        ]
      }, {
        value: 'lvhuaxuncha',
        label: '绿化巡查',
        children: [{
          value: 'duiqizawu',
          label: '堆弃杂物'
        },
        {
          value: 'lajiwuran',
          label: '垃圾污染'
        }
        ],
      }],
      caseStatus: '',
      caseStatusList: [{
        label: '待分派',
        value: 1
      }, {
        label: '待处理',
        value: 2
      }, {
        label: '待结案',
        value: 3
      },],
      caseGrade: '',
      caseGradeList: [{
        label: '全部',
        value: 1
      }, {
        label: '一般',
        value: 2
      }, {
        label: '严重',
        value: 3
      }, {
        label: '紧急',
        value: 4
      }, {
        label: '特急',
        value: 5
      }],
      caseTitleIndex: 0,
      caseFiltrateIconVisible: true,
      caseFiltrateVisible: false,
      caseList: [{
        grade: 0,
        status: 0,
        name: '绿化巡查',
        number: '1392403230776889344',
        people: 'xiaoliang.wei',
        time: '2021-05-12 16:56:14',
        site: '山东省潍坊市潍城区南关街道霓裳舞蹈工作室潍城中心'
      }, {
        grade: 0,
        status: 0,
        name: '绿化巡查',
        number: '1392307983321403392',
        people: 'xiaoliang.wei',
        time: '2021-05-12 10:37:14',
        site: '浙江省金华市义乌市永顺路麻车新村1幢5号义乌中心'
      }, {
        grade: 3,
        status: 0,
        name: '环境卫生',
        number: '1390573332743589888',
        people: 'xiaoliang.wei',
        time: '2021-05-12 10:37:14',
        site: '潍坊市奎文区文化路407号求学书店'
      },],
      caseDetail: {},
      caseFooterBtnVisible: false,
      caseFooterModalVisible: false,
      caseFooterModal: '',
      caseUrge: '',
      caseFinish: '',
      neglectRemark: '',
      caseNeglect: '',
      caseAssign: '',
      assignGrade: '',
      assignTime: '',
      assignTree: '',
      copyTree: '',
      assignNote: '',
      eventOptions: {
        xAxis: {
          show: false,
          type: 'category',
          interval: 0,
          data: ['', '', '', '', '', '', '', '']
        },
        yAxis: {
          show: false,
          type: 'value',
          splitLine: {
            show: false
          }
        },
        series: [{
          type: 'line',
          symbol: 'none',
          smooth: true,
          data: [0, 0, 0, 0, 2, 0, 2, 0],
        }],
        grid: {
          show: true,
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          borderWidth: 0
        },
        color: ['#00b7ee'],
        textStyle: {
          color: '#fff'
        }
      },
      // 处理
      violationAlarmDealVisible: false,
      violationAlarmDealId: '',
      violationAlarmDealType: '',
      // 指派/分派弹框
      patrolCaseAssignVisible: false,
      patrolCaseAssignType: '',
      patrolCaseAssignObj: '',
      patrolCaseAssignLnglat: {},
      // 结案弹框
      patrolCaseCloseVisible: false,
      patrolCaseCloseId: '',
      // 催办弹框
      patrolCaseUrgeVisible: false,
      patrolCaseUrgeId: '',
      EmergentPlan: 0, //应急计划数量
      lTime: new Date().getTime(),// 最后一次点击的时间
      cTime: new Date().getTime(),//当前时间
      timer: null,
    };
  },
  watch: {
    currentTabIndex () {
      this.genDetailVisible = false
    },
    exceptionVisible (newVal) {
      if (!newVal) {
        this.date = getToday();
      }
    },
    genDetailVisible (newVal) {
      if (newVal) {
        this.timer = setInterval(() => {
          this.cTime = new Date().getTime();
          if ((this.cTime - this.lTime) > 15000) {
            this.genDetailVisible = false
          }
        }, 1000);
      } else {
        clearInterval(this.timer)
      }
    }
  },
  computed: {
    ...mapGetters({
      'departmentTreeData': 'getDepartmentTreeList',
      'personTreeData': 'getPersonTreeList'
    }),
    carTypeArr () {
      let arr = [{
        id: 0,
        name: '全部'
      }]
      return arr.concat(this.$store.getters.getCarTypeAllList)
    },
    personTypeArr () {
      let arr = [{
        id: 0,
        name: '全部'
      }]
      return arr.concat(this.$store.getters.getWorkTypeAllList)
    },
    facilityTypeArr () {
      let arr = [{
        id: 0,
        name: '全部'
      }]
      return arr.concat(this.$store.getters.getFacilityBigTypeAllList)
    },
    // 视频监控填充数量
    playVideoEmptyCount () {
      return this.playVideoCount - this.playVideoArr.length
    },
    genArr () {
      let data = this.$store.getters.getElementList
      let arr = [{
        name: '作业车辆',
        icon: 'icon-zhuanyunche1',
        currentNum: data.totalOnlineNumCar,
        totalNum: data.totalNumCar
      },
      {
        name: '作业人员',
        icon: 'icon-huanweigong',
        currentNum: data.totalOnlineNumEmp,
        totalNum: data.totalNumEmp
      },
      {
        name: '环卫设施',
        icon: 'icon-sheshi_mian',
        currentNum: data.totalOnlineNumFac,
        totalNum: data.totalNumFac
      },
      {
        name: '园林绿地',
        icon: 'icon-yuanlinlvdi',
        currentNum: data.totalOnlineNumGar,
        totalNum: data.totalNumGar
      },
      {
        name: '名木古树',
        icon: 'icon-gushumingmu',
        currentNum: data.totalOnlineNumTree,
        totalNum: data.totalNumTree
      },
      ]
      return arr
    },
    carArr () {
      let res = this.$store.getters.getElementList.carElementsList
      return res
    },
    personArr () {
      return this.$store.getters.getElementList.employeeElementsList
    },
    fcltArr () {
      return this.$store.getters.getElementList.facilitiesElementsList
    },
    greenArr () {
      return this.$store.getters.getElementList.gardensElementsList
    },
    treeArr () {
      return this.$store.getters.getElementList.oldTreesElementsList
    },
  },
  mounted () {
    this.init()
  },
  methods: {
    ...mapActions([
      'updateDepartmentTreeList',
      'updateCarTypeAllList',
      'updateWorkTypeAllList',
      'updatePersonTreeList',
      'updateFacilityBigTypeAllList',
      'updateElementList'
    ]),
    init () {
      bus.$on('onMouseDownPage', data => {
        this.lTime = data
      })
      bus.$on('showMainCaseDetail', data => {
        this.caseId = data.id
        this.getCaseDetail()
      })
      bus.$on('getAgainGenList', () => {
        this.updateElementList(true)
      })
      this.updateDepartmentTreeList()
      this.updateElementList(true)

      // 组件MainNavbar已调用，防重复调用
      // this.updateCarTypeAllList()
      // this.updateWorkTypeAllList()

      this.updatePersonTreeList()
      this.updateFacilityBigTypeAllList()

      this.date = getToday();

      // 人员/车辆概况
      this.$http.getMapPersonSituation().then(res => {
        if (res.code === 200) {
          let data = res.result
          this.personStateRate = data.rate
          this.personStateTotal = data.shiftNumber
          this.personStateOnline = data.onGuardNumber
        }
      })
      // 人员/车辆概况
      this.$http.getMapCarSituation().then(res => {
        if (res.code === 200) {
          let data = res.result
          this.carStateRate = data.rate
          this.carStateTotal = data.shiftNumber
          this.carStateOnline = data.onGuardNumber
        }
      })
      // 作业监管
      this.$http.getMapWorkSupervise().then(res => {
        if (res.code === 200) {
          let data = res.result;
          // this.mechanicalRate = data.jxzy;
          this.garbageRate = data.ljqy;
        }
      })
      // 当日异常
      this.$http.getMapTodayException({
        date: this.date
      }).then(res => {
        if (res.code === 200) {
          let data = res.result
          this.dryc_yccl = data.expCarCount
          this.dryc_ycry = data.expPersonCount
          // let dryc_ks = data.carGroup.find(item => item.expName === '空驶')
          // this.dryc_ks = dryc_ks ? dryc_ks.count : 0
          // let dryc_tl = data.carGroup.find(item => item.expName === '停留')
          // this.dryc_tl = dryc_tl ? dryc_tl.count : 0
          // let dryc_lx = data.personGroup.find(item => item.expName === '离线')
          // this.dryc_lx = dryc_lx ? dryc_lx.count : 0
          // let dryc_lg = data.personGroup.find(item => item.expName === '离岗')
          // this.dryc_lg = dryc_lg ? dryc_lg.count : 0

          // this.carGroup = data.carGroup
          // this.personGroup = data.personGroup
        }
      })
      // 视频监控
      this.getVideoList(0)
      this.getVideoList(1)
      this.getVideoList(2)
      // 车辆异常类型
      this.$http.getMapExceptionTypeCar().then(res => {
        if (res.code === 200) {
          let data = res.result.map(item => {
            return {
              name: item.sysName
            }
          })
          let arr = [{
            id: 0,
            name: '全部'
          }]
          this.carExceptionTypeArr = arr.concat(data)
        }
      })
      // 人员异常类型
      this.$http.getMapExceptionTypePerson().then(res => {
        if (res.code === 200) {
          let data = res.result.map(item => {
            return {
              name: item.sysName
            }
          })
          let arr = [{
            id: 0,
            name: '全部'
          }]
          this.personExceptionTypeArr = arr.concat(data)
        }
      })
      // 机械作业进度
      this.$http.getMapCarWorkScene({
        date: getToday()
      }).then((res) => {
        if (res.code === 200) {
          this.mechanicalRate = res.result.totalFinishRate
        }
      })
      this.getOngoingEmergentPlan()
    },
    // 获取应急计划数量
    getOngoingEmergentPlan () {
      this.$http.getOngoingEmergentPlan().then(res => {
        if (res.code == 200) {
          res.result.forEach(item => {
            if (item.levelName == '全部') {
              this.EmergentPlan = item.levelCount
              return false
            }
          })
        }
      })
    },
    // 关闭异常列表
    onClickExceptionClose () {
      this.exceptionVisible = false
    },
    // 获取案件详情
    getCaseDetail () {
      this.$store.dispatch('getPatrolCaseDetail', this.caseId).then(res => {
        this.caseVisible = true
        this.caseDetail = res;
      })
    },
    onClickGenItem (index, name) {
      if (this.currentGenListIndex === index) {
        if (this.genDetailVisible) {
          this.currentGenListIndex = -1
        }
        this.genDetailVisible = !this.genDetailVisible
      } else {
        this.currentGenListIndex = index
        this.genDetailVisible = true
        bus.$emit('hideSearch')
        bus.$emit('hideMapInfoWindow')
        bus.$emit('hideNavbar')
      }
    },
    // 左下角应急计划跳转
    onClickEmer () {
      this.$emit('onClickEmer')
    },
    // 选择监控视频
    onClickVideoItem () {
      this.videoVisible = true
    },
    // 隐藏监控列表
    onClickVideoCancel () {
      this.videoVisible = false
    },
    // 获取监控视频列表
    getVideoList (index) {
      let params = {
        type: '', //类型id  车辆为car  人员 为emp
        deptid: this.departmentId, // 绑定对象所属部门id
        equipcode: this.cameraNumber, //设备编码(电子监控的摄像头编号)
        bindname: this.carNumber, // 对象名称(车载视频的车牌号)
        onlinestatus: '' //状态 0 在线 1 不在线
      }
      if (index === 0) {
        // 电子监控
        if (!this.facilityType) {
          params.type = ''
          params.facType = 'facl'
        } else {
          params.type = this.facilityType
        }
      } else if (index === 1) {
        // 车载视频
        params.type = 'car'
        params.bindtypeitem = this.carType
      } else if (index === 2) {
        // 回传视频
        if (!this.person) {
          params.type = 'emp'
        } else {
          params.type = this.personId
        }
      }
      this.$http.getVideoEquipmentAllList(params).then(res => {
        if (res.code === 200) {
          let data = res.result.vioList.map(item => {
            item.details.forEach(items => {
              items.checked = false
              items.eqptype = item.eqptype
              items.equipcode = item.equipcode
            })
            return item
          })
          switch (index) {
            case 0:
              this.videoList1 = data
              this.syncVideoListCheck(this.videoList1)
              break;
            case 1:
              this.videoList2 = data
              this.syncVideoListCheck(this.videoList2)
              break;
            case 2:
              this.videoList3 = data
              this.syncVideoListCheck(this.videoList3)
              break;
            default:
              break;
          }
        }
      })
    },
    // 视频监控中  选择所属机构
    onChangeDepartment (section) {
      this.departmentId = section.id
      this.departmentName = section.name
      this.getVideoList(this.currentVideoTabIndex)
    },
    // 视频监控中 设施类型回调
    onChangeFacilityType () {
      this.getVideoList(this.currentVideoTabIndex)
    },
    // 视频监控中 摄像头编号 输入框回调
    onChangeCameraNumber (e) {
      this.cameraNumber = e.target.value
      this.getVideoList(this.currentVideoTabIndex)
    },
    // 视频监控中 车辆类型回调
    onChangeCarType () {
      this.getVideoList(this.currentVideoTabIndex)
    },
    // 视频监控中 车辆车牌号输入框回调
    onChangeCarNumber () {
      this.getVideoList(this.currentVideoTabIndex)
    },
    // 视频监控中 选择人员回调
    onChangePerson (data) {
      if (data.type !== 'depart') {
        this.personId = data.id
        this.person = data.name
        this.getVideoList(this.currentVideoTabIndex)
      }
    },
    // 视频全选
    videoAllCheck (item) {
      let boo = true
      for (const items of item.details) {
        if (!items.checked) {
          boo = false
          break
        }
      }
      return boo
    },
    // 视频是否选择
    videoIndeterminate (item) {
      let count = 0
      let length = item.details.length
      for (const items of item.details) {
        if (items.checked) {
          count++
        }
      }
      return (length - count) > 0 && (length - count) < length
    },
    // 修改视频check
    onChangeVideoCheck (value, item) {
      item.details.forEach(items => {
        // this.$set(items, 'checked', value)
        items.checked = value
      })
      this.setVideoPlay(value, item.details)
    },
    // 修改视频item check
    onChangeVideoItemCheck (value, items) {
      this.setVideoPlay(value, [items])
    },
    // 设置视频播放
    setVideoPlay (value, arr) {
      let filterArr = this.playVideoArr.filter(item => !arr.some(items => item.id === items.id))
      if (value) {
        let deleteVideoArr = []
        let newArr = arr.concat(filterArr)
        deleteVideoArr = newArr.slice(this.playVideoCount, newArr.length)
        this.playVideoArr = newArr.slice(0, this.playVideoCount)
        deleteVideoArr.forEach(item => {
          if (item.eqptype == '视频设备') {
            closeFlacDemandVideo(item)
          }
        })
      } else {
        arr.forEach(item => {
          if (item.eqptype == '视频设备') {
            closeFlacDemandVideo(item)
          }
        })
        let newArr = filterArr
        this.playVideoArr = newArr
      }
      this.syncVideoListCheck(this.videoList1)
      this.syncVideoListCheck(this.videoList2)
      this.syncVideoListCheck(this.videoList3)
    },
    // 同步videoList的checkbox
    syncVideoListCheck (arr) {
      arr.forEach(item => {
        item.details.forEach(items => {
          if (this.playVideoArr.some(itemss => itemss.id === items.id)) {
            items.checked = true
          } else {
            items.checked = false
          }
        })
      })
    },
    onChangeGenDetailVisible (boo) {
      !boo && (this.currentGenListIndex = -1)
    },
    onClickGenDetailItem (title, type) {
      bus.$emit('onSearchMenuType', {
        title,
        type
      })
    },
    // 当日异常图标点击
    onClickException () {
      this.onClickExceptionTabItem(0);
      this.exceptionVisible = true
    },
    // 异常列表 标题中的切换
    onClickExceptionTabItem (index) {
      this.exceptionType = '';
      this.personOrCarType = '';
      this.currentExceptionTabIndex = index
      // 车辆
      if (this.currentExceptionTabIndex === 0) {
        this.personOrCarTypeArr = this.carTypeArr
        this.exceptionTypeArr = this.carExceptionTypeArr
      } else {
        this.personOrCarTypeArr = this.personTypeArr
        this.exceptionTypeArr = this.personExceptionTypeArr
      }
      this.getExceptionList()
    },
    // 修改异常时间
    onChangeDate (value) {
      this.date = value;
      this.getExceptionList();
    },
    getExceptionList () {
      if (this.currentExceptionTabIndex === 0) { // 车辆
        this.$http.getMapExceptionCarList({
          date: this.date,
          expName: this.exceptionType ? this.exceptionType == '全部' ? '' : this.exceptionType : '',
          type: this.personOrCarType ? this.personOrCarType == '全部' ? '' : this.personOrCarType : '',
        }).then(res => {
          if (res.code === 200) {
            let data = res.result;
            this.exp_cp = data.expCp;
            this.tbsr_cp = data.tbsrCp;
            this.exp_count = data.expCount;
            this.tbsr_count = data.tbsrCount;
            this.expGroupList = data.groupList;
            this.exceptionList = data.exp.map(item => {
              item.visible = false
              return item
            })
          }
        })
      } else { // 人员
        this.$http.getMapExceptionPersonList({
          date: this.date,
          expName: this.exceptionType ? this.exceptionType == '全部' ? '' : this.exceptionType : '',
          type: this.personOrCarType ? this.personOrCarType == '全部' ? '' : this.personOrCarType : '',
        }).then(res => {
          if (res.code === 200) {
            let data = res.result;
            this.exp_cp = data.expCp;
            this.tbsr_cp = data.tbsrCp;
            this.exp_count = data.expCount;
            this.tbsr_count = data.tbsrCount;
            this.expGroupList = data.groupList;
            this.exceptionList = data.exp.map(item => {
              item.visible = false
              return item
            })
          }
        })
      }
    },
    // 异常列表 列表中详情信息的显隐
    onClickExceptionDetail (item) {
      item.visible = !item.visible
    },
    // 点击异常列表items右箭头
    onClickExceptionItems (item, items) {
      this.violationAlarmDealVisible = true
      if (item.expType == 1) {
        // 报警
        if (this.currentExceptionTabIndex == 0) {
          this.violationAlarmDealId = items.itemId
          this.violationAlarmDealType = 'carAlarm'
        } else if (this.currentExceptionTabIndex == 1) {
          this.violationAlarmDealId = items.itemId
          this.violationAlarmDealType = 'personAlarm'
        }
      } else {
        // == 2 违规
        if (this.currentTabIndex == 0) {
          this.violationAlarmDealId = items.itemId
          this.violationAlarmDealType = 'carViolation'
        } else {
          this.violationAlarmDealId = items.itemId
          this.violationAlarmDealType = 'personViolation'
        }
      }
      // 改为弹框  不跳转到后台操作
      // let params = {
      //   id: items.itemId,
      //   type: item.expName,
      //   author: item.name
      // }
      // if (this.currentExceptionTabIndex === 0) {
      //   //车辆
      //   params.authorType = 'car'
      //   params.authorId = item.carId
      // } else {
      //   // 人员
      //   params.authorType = 'person'
      //   params.authorId = item.personId
      // }
      // if (item.expType == 1) {
      //   // 报警
      //   this.$router.push({
      //     name: 'runAlarm',
      //     params: params
      //   })
      // } else {
      //   // 违规
      //   this.$router.push({
      //     name: 'workViolations',
      //     params: params
      //   })
      // }
    },
    // 事件概况 图标点击
    onClickCase () {
      // 2021年6月17日暂时return
      return
      this.caseVisible = true
    },
    // 关闭事件概况
    onClickCloseCase () {
      this.caseVisible = false
    },
    // 事件概况 搜索图标点击
    onClickCaseSearch () {
      this.caseSearchVisible = true
    },
    // 事件概况 关闭 搜索图标
    onClickCloseCaseSearch () {
      this.caseSearchVisible = false
    },
    // 事件概况 tabs切换
    onClickCaseTitle (i) {
      this.caseTitleIndex = i
      if (this.caseTitleIndex != 0) {
        this.caseFiltrateIconVisible = false
        this.caseFiltrateVisible = false
        this.caseList = []
      } else {
        this.caseFiltrateIconVisible = true
        this.caseList = [{
          grade: 0,
          status: 0,
          name: '绿化巡查',
          number: '1392403230776889344',
          people: 'xiaoliang.wei',
          time: '2021-05-12 16:56:14',
          site: '山东省潍坊市潍城区南关街道霓裳舞蹈工作室潍城中心'
        }, {
          grade: 0,
          status: 0,
          name: '绿化巡查',
          number: '1392307983321403392',
          people: 'xiaoliang.wei',
          time: '2021-05-12 10:37:14',
          site: '浙江省金华市义乌市永顺路麻车新村1幢5号义乌中心'
        }, {
          grade: 3,
          status: 0,
          name: '环境卫生',
          number: '1390573332743589888',
          people: 'xiaoliang.wei',
          time: '2021-05-12 10:37:14',
          site: '潍坊市奎文区文化路407号求学书店'
        }]
      }
    },
    // 事件概况 点击 筛选图标
    onClickCaseFiltrate () {
      this.caseFiltrateVisible = !this.caseFiltrateVisible
    },
    // 事件概况 列表页点击
    onClickCaseDetail (item) {
      this.caseVisible = true
      this.caseDetail = item
    },
    // 事件概况 详情页返回
    onClickCloseCaseDetail () {
      this.caseVisible = false
      this.caseId = ''
    },
    onClickDropdowm (item) {

    },
    // 事件概况详情页底部处理按钮
    onClickCaseDispose () {
      this.$router.push({
        name: 'patrolCase',
        params: {
          id: this.caseDetail.id,
          status: this.caseDetail.status
        }
      })
    },
    // 事件概况详情页底部按钮
    onClickStatusCase (status) {
      let data = {
        "caseId": this.caseDetail.id,
        "caseNo": this.caseDetail.workOrderNumber,
        "caseIssueId": this.caseDetail.questBigType,
        "caseIssueName": this.caseDetail.questBigTypeName,
        "caseIssueChildId": this.caseDetail.questSmallType,
        "caseIssueChildName": this.caseDetail.questSmallTypeName,
        "address": this.caseDetail.site,
        "lng": this.caseDetail.lng,
        "lat": this.caseDetail.lat,
        "personId": this.caseDetail.assignId,
        "personName": this.caseDetail.assign,
        "isPlatformAssign": this.caseDetail.platformAssign,
        "caseLevelId": this.caseDetail.level,
        "caseLevelName": this.caseDetail.levelName,
        "timelimit": this.caseDetail.time,
        "ccUid": this.caseDetail.CC,
        "ccName": this.caseDetail.CCId,
        "isSendSms": this.caseDetail.sendSms,
        "des": this.caseDetail.desc,
        "imgUrl": this.caseDetail.picture,
        "createUid": this.caseDetail.createUid,
        "createName": this.caseDetail.createName,
        "createTime": this.caseDetail.createTime,
        "sheshiTypeId": this.caseDetail.facilityType,
        "sheshiId": this.caseDetail.facilityId,
        "sheshiName": this.caseDetail.facility,
        "status": this.caseDetail.status,
        // "beforeFqStatus": null,
        // "depid": null,
        // "depName": null,
        // "isArchive": 0,
        // "isPostpone": 0,
        "isOverdue": this.caseDetail.isOverdue,
        // "overdueTime": null,
        "consumingTime": this.caseDetail.consumingTime,
        // "isUrge": 0,
        // "sign": 0,
        // "appointTime": null,
        // "appointName": null,
        // "casesetIssueSourceId": "3c49e738aa9624236b635a0d3b1f4344",
        // "startDate": null,
        // "endDate": null,
        // "orgType": null
      }
      switch (status) {
        case '指派':
          this.patrolCaseAssignType = '指派'
          this.patrolCaseAssignObj = data
          this.patrolCaseAssignVisible = true
          this.patrolCaseAssignLnglat = {
            lat: data.lat,
            lng: data.lng,
          }
          break;
        case '改派':
          this.patrolCaseAssignType = '改派'
          this.patrolCaseAssignObj = data
          this.patrolCaseAssignVisible = true
          break;
        case '催办':
          this.patrolCaseUrgeId = data.caseId
          this.patrolCaseUrgeVisible = true
          break;
        case '结案':
          this.patrolCaseCloseId = data.caseId
          this.patrolCaseCloseVisible = true
          break;
        default:
          break;
      }
    },
    // 点击别处关闭左侧要素弹窗
    handlerCloseGenDetail () {
      this.currentGenListIndex = -1
      this.genDetailVisible = false
    }
  },
}
</script>

<style lang='scss' scoped>
@import "@/scss/iviewCssReset/modal";
@import "@/scss/iviewCssReset/progress";
@import "@/scss/iviewCssReset/select";
@import "@/scss/iviewCssReset/input";
@import "@/scss/iviewCssReset/datePicker";
@import "@/scss/iviewCssReset/timeline";
@import "@/scss/iviewCssReset/collapse";
@import "@/scss/iviewCssReset/tree";

::v-deep {
  /* 对话框 */
  .ivu-modal-content {
    background-color: #2c3237;

    .ivu-modal-header {
      background-color: #525a60;
    }

    .ivu-modal-body {
      // padding: 0;
    }
  }

  .ivu-modal-content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 0 5px 0 rgba(37, 187, 150, 0);
  }

  .ivu-select-selection {
    font-size: 14px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.35);

    .ivu-icon {
      color: #ffffff;
    }
  }

  .ivu-select-dropdown {
    background: #333333;
  }

  .ivu-date-picker-rel {
    .ivu-icon {
      color: #ffffff;
    }
  }

  .exception-title-right-row {
    .ivu-progress-outer {
      .ivu-progress-inner {
        padding: 3px 2px;
      }
    }
  }

  .ivu-date-picker-cells-cell-selected {
    em {
      background: #00baff !important;
    }
  }

  .ivu-date-picker-cells-cell-selected:hover {
    em {
      background: #00baff !important;
    }
  }

  .ivu-date-picker-cells-focused {
    em {
      box-shadow: 0 0 0 1px #00baff inset;
    }
  }

  .ivu-date-picker-cells-cell-today {
    em:after {
      background: #00baff !important;
    }
  }

  .ivu-input-icon {
    color: #ffffff;
  }

  .ivu-checkbox-checked {
    .ivu-checkbox-inner {
      border-color: #0d9dff !important;
      background-color: #0d9dff !important;
    }
  }

  .ivu-checkbox-indeterminate {
    .ivu-checkbox-inner {
      border-color: #0d9dff !important;
      background-color: #0d9dff !important;
    }
  }

  .ivu-collapse-content {
    border-top: 1px solid rgba(13, 157, 255, 0.5) !important;
    padding-top: 10px !important;
    margin: 0 20px !important;
  }
}

::v-deep {
  .ivu-poptip-inner {
    background-color: rgba(25, 34, 41, 0.85);
  }

  .ivu-collapse-simple {
    .ivu-collapse-item-active {
      .ivu-collapse-header {
        /* background: #213331;
					border-color: #245a4c; */
        position: initial;
      }
    }

    .ivu-collapse-header {
      /* height: 80px; */
      height: 54px;
      line-height: 1;
      display: flex;
      align-items: center;
      padding: 18px 20px 10px;

      .ivu-icon-ios-arrow-forward {
        order: 1;
        margin-right: 0;
      }
    }
  }

  .left .left-top .left-top-modal .left-top-modal-top i[data-v-26af7522]:hover {
    color: #fff;
  }
}

.left {
  width: 400px;
  position: fixed;
  top: 80px;
  bottom: 0;
  left: 0;
  z-index: 500;
  transition: all 0.2s;
  // overflow: auto;

  .left-top {
    width: 362px;
    height: 598px;
    border-radius: 8px;
    box-shadow: 0 0 16px 0 rgba(95, 99, 106, 0.17);
    color: #ffffff;
    background: url(../../../../assets/new/new_img_1.png) no-repeat 0 0;
    background-size: 100% 100%;
    /* background-color: rgba(25, 34, 41, 0.85); */
    overflow: hidden;

    .left-top-tab {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 37px;
      /* background: url(../../../../assets/main/h_tab.png) no-repeat -2px 0; */

      li {
        width: 160px;
        height: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        font-size: 16px;
        font-weight: bold;
        color: #eee;
        cursor: pointer;

        &.current {
          background: url(../../../../assets/new/new_light.png) no-repeat 0 0;
          color: #00baff;
        }
      }
    }

    .left-top-list {
      .left-top-item {
        display: flex;
        align-items: center;
        height: 97px;
        padding-left: 48px;
        color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        position: relative;

        .left-top-line {
          width: 260px;
          height: 1px;
          position: absolute;
          left: 48px;
          bottom: 0;
        }

        .left-top-name {
          width: 30px;
          font-size: 14px;
          line-height: 20px;
          font-weight: 500;
          color: #ffffff;
          opacity: 0.8;
          margin-left: 30px;
        }

        .left-top-icon {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 30px;
          width: 64px;
          height: 64px;
          border-radius: 50%;
          margin: 0 20px;

          img {
            width: 64px;
            height: 64px;
            position: absolute;
            top: 0;
            left: 0;
            animation: myfirst 3s infinite;
            animation-timing-function: linear;
          }
        }

        &.current {
          background: url(../../../../assets/main/h_item_active_bg1.png)
            no-repeat 0 0;
          background-size: 100% 100%;

          .left-top-icon {
            background: url(../../../../assets/main/h_item_active.png) no-repeat
              0 0;
            background-size: 100% 100%;
          }
        }
      }
    }

    .left-top-modal {
      z-index: 900;
      width: 392px;
      margin: 0;
      position: absolute;
      left: 370px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;

      .left-top-modal-top {
        width: 372px;
        height: 90px;
        font-size: 16px;
        background: url(../../../../assets/new/new_img_top.png) 0 0 no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 34px 0 15px;

        .left-top-modal-top-name {
          width: 160px;
          height: 54px;
          line-height: 54px;
          background-image: url(../../../../assets/new/new_light.png);
          background-size: 100% 100%;
          padding-left: 31px;
        }

        i:hover {
          color: #444;
        }
      }

      .left-top-footer {
        width: 372px;
        height: 70px;
        background: url(../../../../assets/new/new_img_bottom.png) 0 0 no-repeat;
        background-size: 100% 100%;
      }

      .left-top-detail {
        background: url(../../../../assets/new/new_img_center.png) 0 0 no-repeat;
        color: #cccccc;
        padding: 30px 20px 0;

        header {
          line-height: 22px;
          margin-left: 20px;
        }

        .left-top-car {
          header {
            font-weight: bold;
          }

          section {
            display: flex;
            flex-wrap: wrap;
            padding-left: 16px;

            .left-top-car-item {
              width: 145px;
              font-weight: bold;
              display: flex;
              align-items: center;
              margin-top: 16px;
              cursor: pointer;

              .left-top-car-item-img {
                width: 32px;
                height: 32px;
                margin-right: 10px;
              }

              .left-top-car-item-txt {
                color: #cccccc;
                font-weight: 500;
              }

              .left-top-car-icon {
                padding: 4px;
                background: rgba(46, 190, 154, 0.1);
                border-radius: 50%;
                color: #2ebe9a;
                margin-right: 8px;
              }

              span {
                color: #fff;
              }
            }

            .left-top-car-item:nth-child(2n) {
              margin-left: 20px;
            }
          }
        }

        .left-top-person {
          section {
            display: flex;
            // justify-content: space-around;
            flex-wrap: wrap;

            .left-top-person-item {
              width: 25%;
              font-size: 16px;
              color: #cccccc;
              font-weight: 500;
              line-height: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              margin-top: 20px;
              cursor: pointer;

              .left-top-person-item-img {
                width: 50px;
                height: 50px;
                font-weight: bold;
              }

              .left-top-person-icon {
                padding: 11px;
                background: rgba(46, 190, 154, 0.1);
                border-radius: 50%;
                color: #2ebe9a;
                margin-bottom: 6px;
              }

              span {
                color: #fff;
                font-weight: bold;
              }
            }
          }
        }

        .left-top-fclt {
          section {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .left-top-fclt-item {
              width: 25%;
              font-size: 16px;
              color: #cccccc;
              font-weight: 500;
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;
              margin-top: 14px;

              .left-top-fclt-item-img {
                width: 50px;
                height: 50px;
                margin-bottom: 10px;
              }

              .left-top-fclt-icon {
                padding: 11px;
                background: rgba(46, 190, 154, 0.1);
                border-radius: 50%;
                color: #2ebe9a;
                margin-bottom: 6px;
              }

              span {
                color: #fff;
                font-weight: bold;
              }
            }
          }
        }

        .left-top-green {
          section {
            display: flex;
            flex-wrap: wrap;

            .left-top-green-item {
              width: 33.33%;
              font-size: 16px;
              color: #cccccc;
              font-weight: 500;
              line-height: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              cursor: pointer;

              .left-top-green-item-img {
                width: 50px;
                height: 50px;
              }

              .left-top-green-icon {
                padding: 11px;
                background: rgba(46, 190, 154, 0.1);
                border-radius: 50%;
                color: #2ebe9a;
                margin-bottom: 6px;
              }

              span {
                font-size: 18px;
                font-weight: bold;
                color: #fff;
              }
            }
          }

          .left-top-section1 {
            .left-top-green-item:nth-child(-n + 3) {
              margin-bottom: 20px;
            }
          }

          .left-top-section2 {
            .left-top-green-item:nth-child(-n + 6) {
              margin-bottom: 20px;
            }
          }
        }
      }
    }

    .left-video-content {
      padding-top: 20px;

      .left-video-content-line {
        width: 300px;
        height: 1px;
        position: absolute;
        top: 280px;
        left: 31px;
      }

      .left-video-content-item {
        width: 300px;
        height: 150px;
        box-sizing: border-box;
        background-color: #2c2d2e;
        border-radius: 6px;
        background-size: 100% 100%;
        position: relative;
        margin: 0 auto 40px;

        .left-video-content-item-icon {
          font-size: 44px;
          opacity: 0.2;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          cursor: pointer;
        }
      }

      .left-video-content-item {
        ::v-deep {
          .player-box {
            div {
              opacity: 1 !important;
              display: none !important;
            }
          }
        }
      }
    }
  }

  .left-jiankong {
    height: 678px;
    background: url(../../../../assets/new/new_img_678.png) no-repeat;
    background-size: 100% 100%;
  }

  .left-emer {
    width: 362px;
    height: 98px;
    font-size: 15px;
    line-height: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    background: url(../../../../assets/new/emergency_img.png) no-repeat 0 0;
    background-size: 100% 100%;
    cursor: pointer;
    margin-top: 10px;
    padding: 32px 33px 27px 47px;
    color: #fff;

    .left-emer-title {
      display: flex;
      align-items: baseline;

      div:first-child {
        width: 39px;
        height: 39px;
        font-size: 24px;
        font-weight: bold;
        font-family: sans-serif;
        color: #b13e32;
        font-weight: 800;
        border-radius: 50%;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 18px;
      }
    }

    img {
      width: 25px;
      height: 25px;
      margin-right: 20px;
    }

    span {
      font-size: 24px;
      font-weight: 600;
    }
  }
}

.right {
  position: fixed;
  top: 80px;
  bottom: 0;
  right: 5px;
  z-index: 500;
  transition: all 0.2s;
  overflow: auto;

  .right-top-opction {
    opacity: 0;
  }

  .right-car {
    .right-car-item {
      display: flex;
      align-items: center;
      color: #dcdcdc;
      margin: 21px 0 18px 60px;
    }
  }

  .right-work {
    width: 290px;
    margin: 30px auto 0;

    .right-work-item {
      color: #eee;
      margin-bottom: 20px;
    }
  }

  .right-exception {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;

    .right-exception-item {
      /* flex: 1; */

      .right-exception-item-top {
        display: flex;
        align-items: center;

        p {
          color: rgba(255, 255, 255, 0.6);
          font-size: 14px;
          margin-bottom: 8px;
        }

        span {
          color: #edaf50;
          font-size: 18px;
          font-weight: bold;
          line-height: 18px;
        }
      }

      .right-exception-item-number {
        display: flex;
        align-items: center;
        margin-top: 25px;

        .right-exception-item-num {
          flex: 1;
          font-size: 12px;
          color: #ffffff;
          font-weight: bold;
          display: flex;
          align-items: center;

          .right-exception-item-det {
            font-size: 14px;
            color: #f8b551;
            margin-left: 7px;
          }
        }
      }

      .right-exception-item-bottom {
        display: flex;
        align-items: center;
        margin-top: 20px;
        color: #fff;
        font-weight: bold;

        span {
          color: #f8b551;
          margin: 0 8px;
          font-size: 18px;
        }
      }
    }
  }

  .right-event {
    .right-event-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #eee;
      height: 60px;
      background-image: url(../../../../assets/main/com_bg_max.png);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 100% 60px;
    }

    .right-event-bottom {
      height: 80px;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      color: #eee;
    }
  }
}

/* 当日异常 */
.exception-modal {
  ::v-deep {
    .ivu-modal-body {
      padding: 0;
    }
  }
}

.exception {
  width: 1107px;
  height: 732px;
  background: url(../../../../assets/new/new_model_732.png) 0 0 no-repeat;
  background-size: 100% 100%;
  padding: 75px;

  .exception-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .exception-top-name {
      font-size: 20px;
      color: #00baff;
      font-weight: bold;
    }

    .exception-top-img {
      width: 38px;
      height: 38px;
      cursor: pointer;
    }
  }

  .exception-title {
    display: flex;
    align-items: center;

    .exception-title-left {
      display: flex;

      /* margin-right: 40px; */
      .exception-title-left-tab {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 40px 0 0;

        div {
          width: 60px;
          height: 32px;
          font-size: 16px;
          color: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 4px;
          text-align: center;
          line-height: 32px;
          font-weight: bold;
          cursor: pointer;
        }

        div:first-child {
          margin-bottom: 20px;
        }

        .exception-title-left-tab-in {
          color: #fff;
          background-color: #00baff;
          border: 1px solid #00baff;
        }
      }

      .exception-title-left-once,
      .exception-title-left-more {
        color: #ffffff;
        width: 230px;
        height: 130px;
        line-height: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        div:nth-child(1) {
          font-size: 16px;
          font-weight: 500;
          /* margin-top: 15px; */
        }

        div:nth-child(2) {
          margin: 20px 0;

          span {
            font-size: 20px;
            font-weight: 500;
            color: #eee;
            margin-right: 6px;
          }
        }

        div:nth-child(3) {
          font-size: 16px;
          line-height: 1;

          span {
            color: #00baff;
            margin-left: 10px;
          }
        }
      }

      .exception-title-left-more {
        div:nth-child(3) {
          span {
            color: #00baff;
          }
        }
      }
    }

    .exception-title-right {
      flex: 1;
      margin: 0 20px 0 -30px;

      .exception-title-right-row {
        font-size: 16px;
        display: flex;
        align-items: center;
        color: #ffffff;

        div:nth-child(1) {
          min-width: 70px;
          text-align: right;
          margin-right: 10px;
        }

        div:nth-child(3) {
          margin-left: 10px;
        }
      }

      .exception-title-right-row:nth-child(1) {
        margin-bottom: 28px;
      }
    }
  }

  .exception-type {
    display: flex;
    align-items: center;
    height: 42px;

    .exception-type-item {
      display: flex;
      align-items: center;
      margin-right: 50px;

      .exception-type-item-title {
        color: #ffffff;
        margin-right: 20px;
      }
    }
  }

  .exception-line {
    text-align: center;

    img {
      width: 960px;
      height: 25px;
      display: block;
    }
  }

  .exception-cont {
    width: 100%;
    height: 365px;
    overflow: auto;

    .exception-cont-item {
      width: 930px;
      min-height: 56px;
      line-height: 1;
      background: url(../../../../assets/new/new_screen_bgc.png) 0 0 no-repeat;
      background-size: 100% 100%;
      margin-bottom: 5px;

      .cont-title {
        width: 930px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        color: rgba(255, 255, 255, 0.45);

        .cont-title-msg {
          flex: 2;
          font-size: 16px;
          color: #ffffff;
          font-weight: bold;
          display: flex;
          align-items: center;

          div:nth-child(1) {
            font-size: 16px;
          }
        }

        .cont-title-center {
          flex: 1;
          text-align: center;
        }

        .cont-title-btn {
          font-size: 16px;
          color: #ffffff;
          font-weight: bold;
          cursor: pointer;
          display: flex;
          align-items: center;
        }

        .cont-title-btn-icon {
          color: rgba(255, 255, 255, 0.65);
          transition: 0.2s;
        }

        .cont-title-btn-icon-show {
          transform: rotate(180deg);
        }
      }

      .cont-bottom {
        border-top: 1px solid rgba(0, 186, 255, 0.3);
        padding: 16px 0 22px 32px;

        .cont-bottom-item {
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-bottom: 16px;
          font-size: 16px;
          color: rgba(255, 255, 255, 1);

          div:nth-child(1) {
            width: 10%;
          }

          div:nth-child(2) {
            text-align: center;
          }

          div:nth-child(3) {
            width: 35%;
            text-align: center;
          }

          div:nth-child(4) {
            width: 20%;
          }
        }

        .cont-bottom-item:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.exception-cont::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.exception-cont::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  width: 8px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ffffff;
}

.exception-cont::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.5);
}

/* 事件概况 */
.case {
  width: 400px;
  position: fixed;
  top: 80px;
  bottom: 0;
  right: 8px;
  z-index: 500;
  transition: all 0.2s;
  overflow: auto;
  background: rgba(0, 0, 0, 0.95);
  border-radius: 8px;
  margin-bottom: 8px;

  .case-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.15);

    .case-title-left {
      display: flex;
      align-items: center;

      .case-title-left-icon {
        cursor: pointer;
      }

      .case-title-left-tabs {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 0 16px;

        div {
          position: relative;
          transition: all 0.2s;
          margin-right: 36px;
          cursor: pointer;
          color: #fff;
        }

        .case-title-left-tabs-in {
          color: #25bb96;
        }

        .case-title-left-tabs-in::after {
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translate(-50%);
          content: "";
          border: 3px solid transparent;
          border-bottom-color: #25bb96;
        }
      }
    }

    .case-title-right {
      .right-icon {
        color: #ffffff;
        cursor: pointer;
      }

      .right-icon:first-child {
        margin-right: 4px;
      }

      .right-two-icon-in {
        color: rgb(37, 187, 150);
      }
    }

    .case-title-search {
      display: flex;
      align-items: center;
      position: absolute;
      background: #225249;
      height: 100%;
      right: 0;
      left: 0;
      padding-left: 20px;

      .case-title-search-icon {
        cursor: pointer;
      }
    }
  }

  .case-filtrate {
    display: flex;
    align-items: center;
  }

  .case-cont {
    overflow: auto;
    flex: 1;
    padding: 8px 20px;
    color: #999;

    .case-cont-item {
      padding: 0 0 16px 0;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);

      .cont-row1 {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;

        .cont-row1-left {
          font-size: 16px;
          display: flex;
          align-items: center;

          div:first-child {
            margin-right: 5px;
          }

          .general {
            color: rgb(24, 144, 255);
          }

          .extra {
            color: rgb(125, 0, 0);
          }
        }

        .cont-row1-right {
          position: relative;
          display: flex;
          align-items: center;

          .cont-row1-right-status {
            width: 50px;
            height: 24px;
            font-size: 12px;
            text-align: center;
            line-height: 24px;
            background: rgba(250, 173, 20, 0.2);
            color: #faad14;
            border-radius: 12px;
          }

          .cont-row1-right-icon {
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }

      .cont-row2 {
        color: rgba(255, 255, 255, 0.54);
        font-size: 12px;
        margin-bottom: 10px;
        margin-top: 4px;

        .cont-row2-icon {
          cursor: pointer;
        }
      }

      .cont-row3 {
        .cont-row3-icon {
          margin-right: 5px;
        }
      }

      .cont-row4 {
        /* display: flex; */
        /* align-items: center; */
        position: relative;
        margin-top: 8px;

        .cont-row4-span {
          display: inline-block;
          width: 318px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .cont-row4-lefticon {
          vertical-align: 4px;
          margin-right: 5px;
        }

        .cont-row4-righticon {
          position: absolute;
          top: 2px;
          right: 0;
          color: #188268;
          cursor: pointer;
        }
      }
    }
  }
}

/* 事件概况 详情页 */
.case-detail {
  width: 362px;
  height: 803px;
  background: url(../../../../assets/new/new_img_803.png) 0 0 no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 80px;
  bottom: 0;
  right: 8px;
  z-index: 500;
  transition: all 0.2s;
  overflow: auto;
  border-radius: 8px;
  display: flex;
  flex-direction: column;

  .case-detail-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #797979;
    padding: 38px 30px 0 20px;

    .case-detail-title-left {
      width: 160px;
      height: 54px;
      display: flex;
      align-items: center;

      .case-detail-title-left-icon {
        margin: 0 5px 0 10px;
        cursor: pointer;
      }

      .case-detail-title-left-right {
        font-size: 16px;

        .case-detail-title-left-right-row1 {
          color: #fff;

          span:nth-child(1) {
            margin-right: 4px;
          }

          .general {
            color: rgb(24, 144, 255);
          }

          .serious {
            color: rgb(250, 173, 20);
          }

          .urgency {
            color: rgb(245, 34, 45);
          }

          .extra {
            color: rgb(125, 0, 0);
          }
        }

        .case-detail-title-left-right-row2 {
          margin-top: 6px;
        }
      }
    }

    .case-detail-title-right {
      height: 24px;
      font-size: 14px;
      color: #00baff;
      font-weight: 500;
      line-height: 24px;
      background: rgba(0, 186, 255, 0.35);
      border: 1px solid #00baff;
      border-radius: 12px;
      padding: 0 8px;
    }

    .over {
      background: rgba(132, 145, 158, 0.2);
      color: rgb(132, 145, 158);
    }
  }

  .case-detail-id {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
    margin: 20px 35px;
  }

  .case-detail-msg {
    height: 540px;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 0 36px;
    color: rgba(255, 255, 255, 0.8);

    ::v-deep {
      .ivu-timeline-item-head-blue {
        border-color: #00baff;
        color: #00baff;
        /* background-color: rgba(0,0,0,0); */
        /* margin-top: 5px; */
      }

      .ivu-timeline {
        max-height: 420px;
        overflow-y: auto;
      }
    }

    .case-detail-msg-site {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
    }

    .case-detail-msg-treating {
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;
      line-height: 1;
      margin: 20px 0 15px;
    }

    .case-detail-timeline {
      // border-bottom: 1px dashed #eee;
      .case-detail-timeline-row1 {
        display: flex;
        align-items: center;
        position: relative;
        padding-bottom: 5px;
        line-height: 24px;

        .row1-status {
          width: 57px;
          height: 23px;
          margin-right: 8px;
          background: rgba(210, 210, 210, 0.2);
          border-radius: 12px;
          color: #dcdcdc;
          border: 1px solid #dcdcdc;
          text-align: center;
        }

        .row1-time {
          font-size: 16px;
          font-weight: 500;
          line-height: 32px;
          color: rgba(255, 255, 255, 0.8);
        }

        /* 待处理 */
        .pending {
          color: #f39800 !important;
          border: 1px solid #f39800 !important;
          background: rgba(243, 152, 0, 0.4) !important;
        }
      }

      .case-detail-timeline-people {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 8px;
      }
    }
  }

  .case-detail-footer {
    border-top: 1px solid rgba(0, 186, 255, 0.6);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    margin: 20px 38px 0 44px;

    div {
      width: 54px;
      height: 30px;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
      background: #ffffff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .light {
      color: #ffffff;
      background-color: #0d9dff;
    }
  }
}

/* 事件概况 底部按钮弹框 */
.case-modal {
  overflow: auto;
  margin-bottom: 1px;
  padding: 16px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 32px;
  color: #a0a0a0;

  .case-modal-title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;

    .modal-title {
      width: 100px;
    }
  }

  .assign {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .assign-item {
      width: 50%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .assign-item-title {
        min-width: 100px;
        text-align: right;
      }

      .assign-item-time {
        width: 40px;
      }
    }
  }

  .discard {
    display: flex;
    align-items: center;

    div {
      margin-left: 10px;
    }
  }
}

// 视频监控点击
.video-box {
  ::v-deep {
    /* 对话框 */
    .ivu-modal-body {
      padding: 0;
    }
  }
}

.video {
  width: 1107px;
  height: 732px;
  background: url(../../../../assets/new/new_model_732.png) 0 0 no-repeat;
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
  background-size: 100% 100%;
  padding: 70px 80px 0 75px;

  .video-title {
    display: flex;

    .video-title-close {
      flex: 1;
      text-align: right;

      img {
        width: 38px;
        height: 38px;
        cursor: pointer;
      }
    }

    .video-title-item {
      width: 140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid #ffffff;
      transition: all 0.2s;
      margin-right: 20px;
    }

    .current {
      background: rgba(13, 157, 255, 0.5);
      border: 1px solid #0d9dff;
    }
  }

  .video-screen {
    display: flex;
    align-items: center;
    margin: 20px 0 18px;

    .video-screen-item {
      margin-right: 10px;
    }
  }

  .video-line {
    text-align: center;
    font-size: 0;
    margin-bottom: 10px;

    img {
      width: 960px;
      height: 25px;
    }
  }

  .video-btn {
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    line-height: 46px;
    text-align: center;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    .video-btn-left {
      width: 82px;
      height: 46px;
      border-radius: 6px;
      background-color: #ffffff;
      margin-right: 60px;
      cursor: pointer;
    }

    .video-btn-right {
      width: 82px;
      height: 46px;
      color: #ffffff;
      border-radius: 6px;
      background-color: #0d9dff;
      cursor: pointer;
    }
  }

  .video-list {
    height: 370px;
    overflow: auto;
    /* margin-bottom: 15px; */

    .video-list-item {
      width: 930px;
      min-height: 54px;
      line-height: 1;
      background: url(../../../../assets/new/new_screen_bgc.png);
      background-size: 100% 100%;
      box-sizing: border-box;
      cursor: pointer;
      background-color: inherit;
      margin-bottom: 8px;
      position: relative;

      .video-list-item-top {
        width: 171px;
        height: 19px;
        position: absolute;
        top: 0;
        left: 0;
        transform: rotate(180deg);
      }

      .video-list-item-bottom {
        width: 171px;
        height: 19px;
        position: absolute;
        bottom: -1px;
        right: 0;
      }

      .item-parent {
        font-size: 16px;
        color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text {
          .name {
            font-size: 16px;
          }

          // ::v-deep {
          //   .ivu-checkbox-wrapper {
          //     font-size: 16px;
          //   }
          // }
          p {
            font-size: 14px;
            font-weight: 400;
            color: #a0a0a0;
            opacity: 1;
            // text-align: right;
            margin-left: 25px;
          }
        }

        .num {
          color: #cccccc;
          margin-right: 10px;
        }
      }

      .item-child {
        // height: 36px;
        // padding: 16px 0 16px 32px;
        box-sizing: border-box;
        margin-bottom: 2px;
        position: relative;

        .item-child-cont {
          // height: 36px;
          padding: 0 10px 16px 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #ebebeb;

          .item-child-cont-status {
            width: 36px;
            height: 20px;
            background: rgba(132, 145, 158, 0.2);
            border-radius: 10px;
            color: #84919e;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border: 1px solid #84919e;
          }

          .on-line {
            color: #0d9dff;
            background-color: rgba(13, 157, 255, 0.2);
            border: 1px solid #0d9dff;
          }
        }

        .unline {
          color: #535353;
        }
      }
    }
  }
}

.left-center-txt {
  margin: 10px 0;
}

@keyframes myfirst {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.img-light {
  opacity: 0;
}

::v-deep {
  .exception {
    .ivu-progress {
      width: 310px;

      .ivu-progress-inner {
        border: 1px solid rgba(255, 255, 255, 0.5);
      }
    }
  }

  .ivu-progress-inner {
    border: 1px solid rgba(0, 186, 255, 0.5);
    padding: 0;
  }

  .ivu-date-picker-rel {
    .ivu-input {
      font-size: 14px;
      color: #ffffff;
      background-color: rgba(255, 255, 255, 0.35);
      border: 0;
    }
  }

  .ivu-input {
    font-size: 14px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.5);
    border: 0;
  }

  .ivu-input-with-suffix {
    background: #3a4147;
    border: none;
  }
}
</style>
